<template>
  <div
  class="tag"
  :style="{
    border: `1px solid ${TYPE[type].color}`,
    color: `${TYPE[type].color}`
  }"
  >{{TYPE[type].text}}</div>
</template>
<script setup>
const props = defineProps({
  type: {
    type: Number,
    default: 0
  },
})
const TYPE = {
  0:{
    text: '置顶',
    color: '#FF6699'
  },
  1:{
    text: '热门',
    color: '#FF6699'
  },
  2:{
    text: '最新',
    color: '#FF6699'
  },
  3:{
    text: '推荐',
    color: '#FF6699'
  },
  4:{
    text: '原创',
    color: '#FF6699'
  },
  5:{
    text: '精选',
    color: '#FF6699'
  }
}
</script>
<style scoped lang="scss">
.tag{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 3px;
  vertical-align: text-bottom;
  margin-bottom: 0.0666em;
  font-size: 12px;
  margin-right: 5px;
}
</style>